<template>
<van-cell-group>
  <van-actionsheet v-model="showActionsheet" :actions="actionsActionsheet" />

	<div class="van-cell van-cell--required van-hairline van-field" @click="showActionsheet = true">
	  <div class="van-cell__title"><span>{{ currentActionsheet.name }}</span></div>
	</div>

  <div class="van-cell van-cell--required van-hairline van-field" :class="{'van-cell--center van-field--error': errors.has('name')}">
    <div class="van-cell__title"><span>名称</span></div>
    <div class="van-cell__value">
      <input v-model="formFields.name" v-validate="'required'" name="name" type="text" placeholder="请输入名称" class="van-field__control">
      <div v-if="errors.has('name')" class="van-field__error-message">{{ errors.first('name') }}</div>
    </div>
  </div>

  <div class="van-cell van-cell--required van-hairline van-field" :class="{'van-cell--center van-field--error': errors.has('bankName')}">
    <div class="van-cell__title"><span>开户姓名</span></div>
    <div class="van-cell__value">
      <input v-model="formFields.bankName" v-validate="'required'" name="bankName" type="text" placeholder="请输入开户姓名" class="van-field__control">
      <div v-if="errors.has('bankName')" class="van-field__error-message">{{ errors.first('bankName') }}</div>
    </div>
  </div>

  <div class="van-cell van-cell--required van-hairline van-field" :class="{'van-cell--center van-field--error': errors.has('bankAccount')}">
    <div class="van-cell__title"><span>开户账号</span></div>
    <div class="van-cell__value">
      <input v-model="formFields.bankAccount" v-validate="'required'" name="bankAccount" type="text" placeholder="请输入开户账号" class="van-field__control">
      <div v-if="errors.has('bankAccount')" class="van-field__error-message">{{ errors.first('bankAccount') }}</div>
    </div>
  </div>

  <div class="van-cell van-cell--required van-hairline van-field" :class="{'van-cell--center van-field--error': errors.has('bankAddressDetail')}">
    <div class="van-cell__title"><span>支行地址</span></div>
    <div class="van-cell__value">
      <input v-model="formFields.bankAddressDetail" v-validate="'required'" name="bankAddressDetail" type="text" placeholder="请输入支行地址" class="van-field__control">
      <div v-if="errors.has('bankAddressDetail')" class="van-field__error-message">{{ errors.first('bankAddressDetail') }}</div>
    </div>
  </div>

  <van-button v-if="!isDisabled" size="large" type="primary" @click="onSubmit">提交</van-button>
</van-cell-group>
</template>

<script>
import qs from 'qs';
import { Actionsheet, NavBar, Field, CellGroup, Button, Toast } from 'vant';
import ajaxVant from '../../../utils/ajaxVant';
import auth from '../../../utils/auth';

export default {
  components: {
    [Actionsheet.name]: Actionsheet,
    [NavBar.name]: NavBar,
    [Field.name]: Field,
    [CellGroup.name]: CellGroup,
    [Button.name]: Button
  },
  data() {
    return {
      showActionsheet: false,
      currentActionsheet: {
        name: '请选择银行'
      },
      actionsActionsheet: [{
        name: '云支付',
        type: 1,
        callback: this.selectActionsheet
      }, {
        name: '支付宝',
        type: 2,
        callback: this.selectActionsheet
      }, {
        name: '银行卡',
        type: 3,
        callback: this.selectActionsheet
      }],
      isDisabled: false,
      formFields: {
        name: '',
        bankName: '',
        bankAccount: '',
        bankAddressDetail: ''
      }
    };
  },
  methods: {
    selectActionsheet(action) {
      this.formFields.type = action.type;
      this.currentActionsheet.name = action.name;
      this.showActionsheet = false;
    },
    onSubmit() {
      var _this = this;
      _this.$validator.validateAll().then((result) => {
        auth.getToken().then(function(token) {
          ajaxVant.post('/user/bankInfo?token=' + token, qs.stringify(_this.formFields)).then(function(data) {
            if (data !== false) {
              Toast('提交成功');

              setTimeout(() => {
                Toast.clear();
                _this.$router.push({ name: 'userBankInfo' });
              }, 1000);
            }
          });
        });
      });
    }
  }
};

</script>